{include file="base/_meta" /}
<style>
    .layui-form-checkbox {
        margin-bottom: 5px;
    }
    .layui-row{
        position: relative;
    }
    .layui-col-md3{
        position: fixed;
        top: 10px;
        z-index: 9999;
    }
    .layui-col-md9{
        position: absolute;
        right: 0;
    }
</style>
</head>
<body>

<div class="layui-fluid" style="padding: 20px;">

    <div class="layui-row layui-col-space20">
        <div class="layui-col-md3 layui-col-xs3 left" style="max-height: 450px;overflow: auto;">
            <div class="layui-card">
                <div class="layui-card-header"><b>选择题</b></div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius radioBtn layui-btn-sm">单选</button>
                    <br>
                    <br>
                    <button class="layui-btn layui-btn-fluid layui-btn-radius checkboxBtn layui-btn-sm">多选</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"><b>填空题</b></div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius inputBtn layui-btn-sm">多项填空</button>
                    <br>
                    <br>
                    <button class="layui-btn layui-btn-fluid layui-btn-radius tableBtn layui-btn-sm">表格填空</button>
                    <br>
                    <br>
                    <button class="layui-btn layui-btn-fluid layui-btn-radius dateBtn layui-btn-sm">时间选择</button>
                    <br>
                    <br>
                    <button class="layui-btn layui-btn-fluid layui-btn-radius titleBtn layui-btn-sm">标题</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"><b>上传文件</b></div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius fileBtn layui-btn-sm">文件</button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header"><b>预览</b></div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius seeMiniBtn layui-btn-sm">小程序</button>
                    <br>
                    <br>
                    <!--                    <button class="layui-btn layui-btn-fluid layui-btn-radius">PC</button>-->
                </div>
            </div>

        </div>
        <div class="layui-col-md9 layui-col-xs9 layui-form" id="questionTemp">
            <p style="text-align: center;">暂无数据，点击左侧按钮进行添加或预览</p>
        </div>
    </div>

</div>


{include file="base/_script" /}

<script>
    layui.use(['layer', 'form', 'admin', 'notice'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , admin = layui.admin
            , notice = layui.notice
            , form = layui.form;

        $(".radioBtn").click(function () {
            var index = $(this).attr("data-index")
            add("单选题", "form?question_id={$question_id}" + "&type=radio", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".checkboxBtn").click(function () {
            var index = $(this).attr("data-index")
            add("多选题", "form?question_id={$question_id}" + "&type=checkbox", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".inputBtn").click(function () {
            var index = $(this).attr("data-index")
            add("多项填空", "form?question_id={$question_id}" + "&type=input", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".titleBtn").click(function () {
            var index = $(this).attr("data-index")
            add("标题", "form?question_id={$question_id}" + "&type=title", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".tableBtn").click(function () {
            var index = $(this).attr("data-index")
            add("表格填空", "form?question_id={$question_id}" + "&type=table", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".fileBtn").click(function () {
            var index = $(this).attr("data-index")
            add("文件", "form?question_id={$question_id}" + "&type=file", ['800px', '600px'], function () {
                getTemp()
            })
        })
        $(".dateBtn").click(function () {
            var index = $(this).attr("data-index")
            add("时间选择", "form?question_id={$question_id}" + "&type=date", ['800px', '600px'], function () {
                getTemp()
            })
        })
        // 预览
        $(".seeMiniBtn").click(function () {
            $.post("{:url('question/getQuestionErcode')}", {id:"{$question_id}"}, function (ret) {
                if (ret.code == 0){
                    var html = '<div ><img src="'+ret.data.src+'" style="width: 100%"></div>'
                    layer.open({
                        type: 1,
                        skin: '', //加上边框
                        area: ['420px', '520px'], //宽高
                        content: html,
                        shade: 0.3,
                        shadeClose: true,
                    });
                }else{
                    notice.error("加载失败")
                }
            })
        })
        // 编辑
        $("#questionTemp").on('click', '.edit', function () {
            var index = $(this).attr("data-index")
            var type = $(this).attr("data-type")
            var title = "";
            switch (type) {
                case 'radio':
                    title = "单选题";
                    break;
                case 'checkbox':
                    title = "多选题";
                    break;
                case 'input':
                    title = "多行填空";
                    break;
                case 'table':
                    title = "表格填空";
                    break;
                case 'file':
                    title = "文件上传";
                    break;
                case 'date':
                    title = "时间选择";
                    break;
            }
            add(title, "form?question_id={$question_id}&index=" + index + "&type=" + type, ['800px', '600px'], function () {
                getTemp()
            })
        })
        // 删除
        $("#questionTemp").on('click', '.del', function () {
            var index = $(this).attr("data-index")
            layer.confirm('确定删除？', {icon: 3, title: '提示信息'}, function () {
                $.post("{:url('question/tempDel')}", {index: index, question_id: "{$question_id}"}, function () {
                    layer.closeAll()
                    getTemp()
                })
            })

        })
        // y移动
        $("#questionTemp").on('click', '.handle', function () {
            var index = $(this).attr("data-index")
            var type = $(this).attr("data-type")
            $.post("{:url('question/tempMove')}", {
                index: index,
                type: type,
                question_id: "{$question_id}"
            }, function (ret) {
                if (ret.code == 0) {
                    getTemp()
                } else {
                    notice.msg(ret.msg, {icon: 2})
                }
            })
        })
        // 插入
        $("#questionTemp").on('click', '.insert', function () {
            var index = $(this).attr("data-index")
            var that = this;
            var html = '<button class="layui-btn layui-btn-fluid layui-btn-radius radioBtn">单选</button >' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius checkboxBtn" style="margin-left:0;margin-top:5px;">多选</button>' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius inputBtn" style="margin-left:0;margin-top:5px;">多项填空</button>' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius tableBtn" style="margin-left:0;margin-top:5px;">表格填空</button>' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius dateBtn" style="margin-left:0;margin-top:5px;">时间选择</button>' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius fileBtn" style="margin-left:0;margin-top:5px;">文件</button>' +
                '<button class="layui-btn layui-btn-fluid layui-btn-radius titleBtn" style="margin-left:0;margin-top:5px;">标题</button>';

            var test = layer.tips(html, that, {time: 0, shade: 0.3, shadeClose: true,});

            $(".layui-layer-content").on('click', '.radioBtn', function () {
                add("单选题", "form?question_id={$question_id}&type=radio&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".layui-layer-content").on('click', '.checkboxBtn', function () {
                add("多选题", "form?question_id={$question_id}&type=checkbox&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".layui-layer-content").on('click', '.inputBtn', function () {
                add("多项填空", "form?question_id={$question_id}&type=input&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".layui-layer-content").on('click', '.tableBtn', function () {
                add("表格填空", "form?question_id={$question_id}&type=table&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".layui-layer-content").on('click', '.fileBtn', function () {
                add("文件", "form?question_id={$question_id}&type=file&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".dateBtn").click(function () {
                add("时间选择", "form?question_id={$question_id}&type=date&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })
            $(".titleBtn").click(function () {
                add("标题", "form?question_id={$question_id}&type=title&insert=insert&index="+index, ['800px', '600px'], function () {
                    getTemp()
                })
            })

        })
        getTemp()

        function getTemp() {
            $.post("{:url('question/getTEmp')}", {question_id: "{$question_id}"}, function (ret) {
                var ret = JSON.parse(ret)
                console.log(ret)
                var html = '';
                for (let i = 0, len = ret.length; i < len; i++) {
                    var data = ret[i]
                    let required = '';

                    if (data.required == 'true') {
                        required = 'layui-form-required';
                    }

                    html += "            <div class=\"layui-card\">\n" +
                        "                <div class=\"layui-card-header " + required + "\">" + (i * 10 / 10 + 1) + "." + data.label + "</div>\n" +
                        "                <div class=\"layui-card-body\">\n";
                    let values = data.values

                    if (ret[i]['type'] == 'radio') {
                        for (let j = 0, len = values.length; j < len; j++) {
                            html += "<input type=\"radio\" name=\"" + data.name + "\" value=\"" + values[j]['label'] + "\" title=\"" + values[j]['label'] + "\"> <br>\n";
                        }
                    }
                    if (ret[i]['type'] == 'checkbox') {
                        for (let j = 0, len = values.length; j < len; j++) {
                            html += "<input type=\"checkbox\" name=\"" + data.name + "\" value=\"" + values[j]['label'] + "\" title=\"" + values[j]['label'] + "\" style='padding-bottom: 5px;'><br>\n";
                        }
                    }

                    if (ret[i]['type'] == 'input' &&　values) {
                        for (let j = 0, len = values.length; j < len; j++) {
                            html += "<div class=\"layui-form-item\">\n" +
                                "        <label class=\"layui-form-label\">" + values[j]['label'] + "</label>\n" +
                                "        <div class=\"layui-input-block\">\n" +
                                "            <input type=\"text\" name=\"title\" required lay-verify=\"required\" placeholder=\"请输入\" autocomplete=\"off\" class=\"layui-input\" value=\"\">\n" +
                                "        </div>\n" +
                                "    </div>";
                        }
                    }

                    if (ret[i]['type'] == 'title' &&　values) {
                        html += "<div class=\"layui-form-item\">\n" +
                            "        <label class=\"layui-form-label\">" + data['label'] + "</label>\n" +
                            "    </div>";
                    }

                    if (ret[i]['type'] == 'table') {
                        let hang = data.hang.split(/[(\r\n)\r\n]+/)
                        let lie = data.lie.split(/[(\r\n)\r\n]+/)
                        let td = "";
                        html += "<table class=\"layui-table\">" +
                            "<thead>" +
                            "<tr><td></td>";
                        for (let j = 0, len = lie.length; j < len; j++) {
                            html += "<td>" + lie[j] + "</td>";
                            td += "<td><input type='text' class='layui-input'></td>";
                        }
                        html += "</thead><tbody>";
                        for (let k = 0, len = hang.length; k < len; k++) {
                            html += "<tr><td>" + hang[k] + "</td>" + td + "</tr>"
                        }

                        html += "</tbody></table>";
                    }

                    if (ret[i]['type'] == 'file') {
                        html += "<input type='file'>"
                    }
                    if (ret[i]['type'] == 'date'){
                        html += "<input type='date'>"
                    }

                    html += "                </div>\n" +
                        "                <div class=\"layui-card-footer layui-row\" style=\"border-top: 1px solid #f6f6f6;padding: 15px;\">\n" +
                        "                    <div class=\"layui-col-xs2\">\n" +
                        "                        <span class='insert' style='color: #01AAED;cursor: pointer;' data-index=\"" + i + "\">在此题之后插入</span>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"layui-col-xs10\" style=\"text-align: right\">\n" +
                        "                        <button class=\"layui-btn layui-btn-sm edit\" data-index=\"" + i + "\" data-type=\"" + data.type + "\">编辑</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-primary handle\" data-type='copy' data-index=\"" + i + "\" data-type=\"" + data.type + "\">复制</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-danger del\" data-index=\"" + i + "\">删除</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-primary handle\" data-type='up' data-index=\"" + i + "\">上移</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-primary handle\" data-type='down' data-index=\"" + i + "\">下移</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-primary handle\" data-type='upest' data-index=\"" + i + "\">最前</button>\n" +
                        "                        <button class=\"layui-btn layui-btn-sm layui-btn-primary handle\" data-type='downest' data-index=\"" + i + "\">最后</button>\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "            </div>";

                }
                $("#questionTemp").html(html)
                form.render()
            })
        }
    })
</script>
</body>
</html>
